<%--
  Created by IntelliJ IDEA.
  User: yu'xiao'fei
  Date: 2022/9/20
  Time: 下午 03:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set value="${pageContext.request.contextPath}" var="path"></c:set>
<html lang="en" class="pxp-root">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="shortcut icon" href="${path}/static/web/images/favicon.png" type="image/x-icon">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600;700&display=swap" rel="stylesheet">
    <link href="${path}/static/web/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="${path}/static/web/css/font-awesome.min.css">
    <link rel="stylesheet" href="${path}/static/web/css/owl.carousel.min.css">
    <link rel="stylesheet" href="${path}/static/web/css/owl.theme.default.min.css">
    <link rel="stylesheet" href="${path}/static/web/css/animate.css">
    <link rel="stylesheet" href="${path}/static/web/css/style.css">

    <title>更改密码</title>
</head>
<body style="background-color: var(--pxpSecondaryColorLight);">
<jsp:include page="/web/personal/inc/personalCenterHead"></jsp:include>

    <div class="pxp-dashboard-content-details">
        <h1>更改密码</h1><!--Change Password-->
        <p class="pxp-text-light">选择一个新的账户密码</p><!--Choose a new account password.-->

        <form id="myform" method="post" action="/web/personal/changePassword">
            <div class="row mt-4 mt-lg-5">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="pxp-candidate-old-password" class="form-label">旧密码</label><!--Old password--><span id="oldPass-msg" style="color: red;"></span>
                        <input type="password" id="pxp-candidate-old-password" class="form-control" placeholder="输入旧密码"><!--Enter old password-->
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="pxp-candidate-new-password" class="form-label">新密码</label><!--New password--><span id="passwordMsg" style="color: red;"></span>
                        <input type="password" name="pass" id="pxp-candidate-new-password" class="form-control" placeholder="输入新密码"><!--Enter new password-->
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="pxp-candidate-new-password-repeat" class="form-label">新密码重复</label><!--New password repeat--><span id="passwordSecondMsg" style="color: red;"></span>
                        <input type="password" id="pxp-candidate-new-password-repeat" class="form-control" placeholder="重复新密码"><!--Repeat new password-->
                    </div>
                </div>
            </div>

            <div class="mt-4 mt-lg-5">
                <button class="btn rounded-pill pxp-section-cta" id="saveNewPass" type="button">保存新密码</button><!--Save New Password-->
            </div>
        </form>
    </div>

    <footer>
        <div class="pxp-footer-copyright pxp-text-light">© 2021 乔布斯特. 保留所有权力.</div><!--© 2021 Jobster. All Right Reserved.-->
    </footer>
</div>

<script src="${path}/static/web/js/jquery-3.4.1.min.js"></script>
<script src="${path}/static/web/js/bootstrap.bundle.min.js"></script>
<script src="${path}/static/web/js/owl.carousel.min.js"></script>
<script src="${path}/static/web/js/nav.js"></script>
<script src="${path}/static/web/js/Chart.min.js"></script>
<script src="${path}/static/web/js/main.js"></script>
</body>

<script>
    $(function (){
        $("#pxp-candidate-old-password").blur(checkOldPass);
        $("#pxp-candidate-new-password").blur(checkPassword);
        $("#pxp-candidate-new-password-repeat").blur(checkPassWordSecond);
        $("#saveNewPass").click(function (){
           if (checkPassword()&&checkPassWordSecond())
           {
               alert("密码修改成功，请重新登录");
               $("#myform").submit();
           }
        });
    });

    function checkOldPass()
    {
        let password = $("#pxp-candidate-old-password").val();
        let checkFlag;
        $.ajax({
            url:"/web/personal/checkOldPass",
            type:"get",
            data:{
                password:password
            },
            success:function (mes){
                if (mes=="false")
                {
                    $("#oldPass-msg").html("密码错误，请重新输入");
                    $("#pxp-candidate-old-password").focus();
                    checkFlag=false;
                }
                else {
                    $("#oldPass-msg").html("");
                    checkFlag=true;
                }
            }
        });
        return checkFlag;
    }
    function checkPassword()
    {
        let password = $("#pxp-candidate-new-password").val();
        if (password.length<6)
        {
            $("#passwordMsg").html("密码不能小于6位");
            $("#pxp-candidate-new-password").focus();
            return false;
        }
        $("#passwordMsg").html("");
        return true;

    }

    function checkPassWordSecond()
    {
        let passwordSecond = $("#pxp-candidate-new-password-repeat").val();
        let password = $("#pxp-candidate-new-password").val();
        if (password!=passwordSecond)
        {
            $("#passwordSecondMsg").html("两次密码不一致");
            $("#pxp-candidate-new-password-repeat").focus();
            return false;
        }
        $("#passwordSecondMsg").html("");
        return true;
    }
</script>
</html>
